<template>
    <div class="func-test">
        <div class="funcList">
            <span @click="showFunc(item)" v-for="item in funcList" :key="item.id">{{item.funcName}}</span>
        </div>
        <div class="funcList tool">
            <span @click="getTimeStamp">获取随机时间戳</span>
            <span @click="getHtmlText">获取一段html文本</span>
            <input id='input' type="text" v-model="toolResult">
        </div>
        <div class="funcBody">
            <div class="funcNotice">
                <h3>函数名称</h3>
                <p style="font-weight: bold;" class="green">{{currentFunc.funcName || '--'}}</p>
                <h3>函数说明</h3>
                <p>{{currentFunc.funcIntro || '--'}}</p>
                <h4>参数</h4>
                <p v-for="(item, index) in currentFunc.funcParams" :key="index">{{item.name + '：' + item.intro}}</p>
                <h4>返回</h4>
                <p>{{currentFunc.funcReturn}}</p>
            </div>
            <div class="funcOperate">
                <h3>测试区</h3>
                <h4>参数</h4>
                <div class="funcParams" v-for="(item, index) in currentFunc.funcParams" :key="index">
                    <span>{{item.name}}</span>
                    <input type="text" placeholder="输入参数" @keypress.enter="runFunc" v-model="item.value">
                </div>
                <button v-show="currentFunc.funcName" @click="runFunc">运行函数</button>
                <h4>返回</h4>
                <div class="funcReturn">
                    {{funcReturn}}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {dateFormat, rangeMonthDays, nearlyDate, timeTransform, decodeHtml, restTime} from '../utils/byts-function'
export default {
    data() {
        return {
            funcList: [],
            currentFunc: {},
            funcReturn: '',
            toolResult: ''
        }
    },
    created() {
    this.getFuncInfo()
  },
  methods: {
    getFuncInfo(){
      this.$http({
        url: 'getFuncInfo',
        method: 'post'
      }).then(res => {
        if (res.data.state == 200) {
          this.funcList = res.data.content
        }else{
          console.log('函数获取失败！')
        }
      }).catch(err => {
        console.log(err)
      })
    },
    showFunc(func){
      this.currentFunc = func
      this.funcReturn = ''
    },
    runFunc(){
      let paramList = this.currentFunc.funcParams
      switch (this.currentFunc.id) {
        case '0':
          this.funcReturn = dateFormat(paramList[0].value, paramList[1].value)
          break;
        case '1':
          this.funcReturn = rangeMonthDays(paramList[0].value, paramList[1].value)
          break;
        case '2':
          this.funcReturn = nearlyDate(paramList[0].value, paramList[1].value)
          break;
        case '3':
          this.funcReturn = timeTransform(paramList[0].value)
          break;
        case '4':
          this.funcReturn = decodeHtml(paramList[0].value)
          break;
        case '5':
          this.funcReturn = restTime(paramList[0].value)
          break;
        default:
          break;
      }
    },
    //工具函数
    getTimeStamp(){
      this.toolResult = new Date().getTime() - Math.ceil(Math.random() * 1000 * 3600 * 24 * 365)
      this.$nextTick(() => {
        document.getElementById('input').select()
        let state = document.execCommand('copy')
        if (state) {
          this.$notify({
            title: '获取时间戳成功',
            message: '已复制到剪切板',
            type: 'success',
            duration: 1500
          })
        }else{
          this.$notify({
            title: '复制发生错误',
            message: '请使用：' + new Date().getTime(),
            type: 'error',
            duration: 0
          })
        }
      })
    },
    getHtmlText(){
      this.toolResult = '<p>第一段</p><p>第二段</p><p>第三段</p><p>第四段</p><p>第五段，发生截取</p>'
      this.$nextTick(() => {
        document.getElementById('input').select()
        let state = document.execCommand('copy')
        if (state) {
          this.$notify({
            title: '获取html文本成功',
            message: '已复制到剪切板',
            type: 'success',
            duration: 1500
          })
        }else{
          this.$notify({
            title: '复制发生错误',
            message: '请使用：<p>第一段</p><p>第二段</p><p>第三段</p><p>第四段</p><p>第五段，发生截取</p>',
            type: 'error',
            duration: 0
          })
        }
      })
    }
  },
}
</script>

<style lang="less" scoped>
@import '../css/common.less';
.func-test{
    overflow: hidden;
    padding: 10px;
}
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: @green;
  cursor: pointer;
}
a:hover{
  text-decoration: underline;
}
.logo{
  width: 240px;
  border-radius: 10px;
  box-shadow: 0 0 5px @grey;
}
.colorful-animation{
  font-weight: bold;
  animation: colorful 1.5s ease-in infinite;
}

.funcList{
  padding: 20px 10px;
  box-sizing: border-box;
  border: @green 4px dashed;
  &.tool{
    margin-top: 20px;
    border: none;
    padding: 0;
    text-align: left;
    position: relative;
    width: 100vw;
    overflow: hidden;
    span{
      color: @red;
    }
    #input{
      position: absolute;
      top: 0;
      right: -1000px;
      // border: none;
      z-index: -10
    }
  }
}
.funcList span{
  margin: 0 10px;
  color: @green;
}
.funcList span:hover{
  text-decoration: underline;
  cursor: pointer;
  font-weight: bold;
}
.funcBody{
  display: flex;
  margin-top: 20px;
  height: calc(100vh - 185px);
  text-align: left;
  .funcNotice{
    flex: 1;
    padding: 20px;
    box-sizing: border-box;
    border: @blue 4px dashed;
    margin-right: 20px;
  }
  .funcOperate{
    flex: 2;
    padding: 20px;
    box-sizing: border-box;
    border: @red 4px dashed;
    .funcParams{
      display: inline-block;
      font-weight: bold;
      margin-right: 20px;
      span{
        margin-right: 5px;
      }
    }
  }
}
</style>
